Intoduction


img

Masco - Laravel 11 & Tailwind CSS - Saas Software Startup Template

Created : 14-May-2024
Updated : 04-June-2024
By : PixcelsThemes
E-mail: pixcelsthemes@gmail.com
Version : 1.2.0

Thank you for purchasing Masco - Laravel 11 & Tailwind CSS Saas Software Startup Template. If you have any questions that are beyond the scope of this help file, please feel free to email, via my user page contact form or put a ticket at Support Center .
Thank you so much!

Getting Started


  • Install Server (Recommended PHP version: >8.2)
  • Make sure to have the Xampp/WampServer/Lampp installed & running in your computer. If you already have installed server on your computer, you can skip this step if your existing PHP version is greater than >8.2.
  • Install Composer (Recommended version: >= 2.2)
  • Make sure to have the composer installed & running in your computer. If you already have installed server on your computer, you can skip this step.
  • This Template is Tailwind CSS, where you need to install Node.js. You can download Node.js LTS from here

After install Node.js, open the terminal in to the masco folder root directory and run npm install
or yarn install
for install node package modules.

This would install all the required packages in the vendor folder. composer install
or composer i

Here all the packages will be installing. After installed all packages , you can run php artisan serve for local development purpose

For minify Tailwind CSS in to the Production version run npm run minify:css
or yarn minify:css

Tailwind File Configuration


You can customize/ configuration fonts, color, screen, plugins etc from tailwind.config.js file. For more details Visit Tailwind Configuration Document

image html

Folder Structure


    Masco Folder
        Masco/
        ├─ build/
        │  ├─ tailwind.css
        ├─ app/
        ├─ bootstrap/
        ├─ config/
        ├─ databse/
        ├─ public/
        │  │  ├─ all CSS files
        │  ├─ fonts/
        │  │  ├─ all Fonts files
        │  ├─ img/
        │  │  ├─ all Images files
        │  ├─ js/
        │  │  ├─ all JavaScript files
        ├─ routes/
        ├─ storage/
        ├─ tests/
        ├─ .env
        ├─ .env.example
        ├─ artisan
        ├─ composer.json
        ├─ package.json
        ├─ phpunit.xml
        ├─ README.md
        ├─ tailwind.config.js
        ├─ vite.config.js      
        ├─ documentation/
        │  ├─ index.html - Index file for documentation

blade.php Structure


The Masco template uses Latest Tailwind 3 with valid HTML5 tags. This theme is a responsive layout. All of the information in content area is nested within a class and comes with predefined classes.

image html


Output


image html

Tailwind Files and Structure


Mainly 2 main CSS files are used in this theme. The first one tailwind.css in build folder to generate style.css file into the static/css folder, second one is custom.css to control the layouts.


image html

JavaScript


This theme imports 2 types of Javascript files. All of these free from jquery dependency.

  • main.js
  • vendors/clients JavaScript plugins



image html

Contact form Structure


image html


Output


image html

Required File


Required Css


image html


Required Js


image html

Logo Structure


image html

Blog Structure


image html

Widget Structure


image html

Sources and Credits


Fonts Used in the template are google fonts

Fonts Used are :


Image Used:


Sliders Used Are :

Swiper Slider ( Swiper Slider )


Every Code is properly commented for Editing Ease.

Support


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have any queries, please feel free to contact us at

pixcelsthemes@gmail.com

Email Us at : Pixcels Themes